
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  productImage: {
    type: String,
    required: true
  },
  productName: {
    type: String,
    required: true
  },
  productDescription: {
    type: String,
    default: 'No description available.'
  },
  productPrice: {
    type: Number,
    required: true
  }
});
</script>


<template>
  <el-card class="product-card" shadow="hover">
    <div class="product-image-wrapper">
      <img :src="productImage" :alt="productName" class="product-image">
    </div>
    <div class="product-info">
      <h3 class="product-name">{{ productName }}</h3>
      <p class="product-description">{{ productDescription }}</p>
    </div>
    <div class="product-price">
      <span>￥{{ productPrice }}</span>
    </div>
  </el-card>
</template>

<style scoped>
.product-card {
  width: 250px; /* Set the width of the card */
  height: 350px;
  margin-right: 16px; /* Space between cards */
  margin-bottom: 16px;
}

.product-image-wrapper {
  text-align: center; /* Center the image */
  margin-bottom: 8px;
}

.product-image {
  width: 100%; /* Full width of the wrapper */
  max-width: 200px; /* Maximum width of the image */
  height: auto; /* Maintain aspect ratio */
  border-radius: 4px; /* Optional: round the corners of the image */
}

.product-name {
  font-size: 0.9em;
  color: #333;
  margin: 0 0 4px; /* Add some margin at the bottom */
  text-align: center;
}

.product-description {
  font-size: 0.8em;
  color: #666;
  text-align: center;
  overflow: hidden; /* Optional: hide text if it exceeds the space */
  white-space: nowrap; /* Optional: keep the text on a single line */
}

.product-price {
  font-weight: bold;
  margin-top: 4px;
  text-align: center;
}
</style>
